<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预算管理 - 个人财务管理系统</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入自定义CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="{{ url_for('index') }}">个人财务管理系统</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('index') }}">交易管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('reports') }}">财务报表</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="{{ url_for('budget') }}">预算管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('settings') }}">设置</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-5">
        <!-- 标题和月份选择 -->
        <div class="row mb-5">
            <div class="col-md-6">
                <h2>预算管理</h2>
            </div>
            <div class="col-md-6 text-right">
                <form method="GET" action="{{ url_for('budget') }}">
                    <div class="input-group" style="max-width: 250px; float: right;">
                        <input type="month" name="month" class="form-control" value="{{ selected_month }}">
                        <button type="submit" class="btn btn-primary">查看</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 消息提示区域 -->
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        <!-- 添加预算按钮 -->
        <div class="row mb-4">
            <div class="col-md-12 text-right">
                <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addBudgetModal">
                    <i class="fa fa-plus"></i> 添加预算
                </button>
            </div>
        </div>

        <!-- 预算列表表格 -->
        <div class="row mb-5">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3>预算列表</h3>
                    </div>
                    <div class="card-body">
                        {% if budgets %}
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead class="table-primary">
                                        <tr>
                                            <th>类别</th>
                                            <th>预算金额</th>
                                            <th>已用金额</th>
                                            <th>剩余金额</th>
                                            <th>执行进度</th>
                                            <th>状态</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for budget in budgets %}
                                            {% set percentage = (budget.used_amount / budget.amount * 100) if budget.amount > 0 else 0 %}
                                            <tr class="{% if percentage > 100 %}table-danger{% elif percentage > 80 %}table-warning{% else %}table-success{% endif %}">
                                                <td>{{ budget.category_name }}</td>
                                                <td>¥{{ "%.2f"|format(budget.amount) }}</td>
                                                <td>¥{{ "%.2f"|format(budget.used_amount) }}</td>
                                                <td>¥{{ "%.2f"|format(budget.amount - budget.used_amount) }}</td>
                                                <td>
                                                    <div class="progress" style="height: 20px;">
                                                        <div class="progress-bar {% if percentage > 100 %}bg-danger{% elif percentage > 80 %}bg-warning{% else %}bg-success{% endif %}" 
                                                             role="progressbar" 
                                                             style="width: {% if percentage > 100 %}100{% else %}{{ percentage }}{% endif %}%" 
                                                             aria-valuenow="{{ percentage }}" 
                                                             aria-valuemin="0" 
                                                             aria-valuemax="100">
                                                            {{ "%.1f"|format(percentage) }}%
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    {% if percentage > 100 %}
                                                        <span class="badge bg-danger">超支</span>
                                                    {% elif percentage > 80 %}
                                                        <span class="badge bg-warning">接近预算</span>
                                                    {% else %}
                                                        <span class="badge bg-success">正常</span>
                                                    {% endif %}
                                                </td>
                                                <td>
                                                    <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#editBudgetModal" 
                                                            data-id="{{ budget.id }}" data-category="{{ budget.category_id }}" 
                                                            data-amount="{{ budget.amount }}">
                                                        <i class="fa fa-pencil"></i> 编辑
                                                    </button>
                                                    <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteBudgetModal" 
                                                            data-id="{{ budget.id }}" data-category="{{ budget.category_name }}">
                                                        <i class="fa fa-trash"></i> 删除
                                                    </button>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        {% else %}
                            <div class="text-center">
                                <p class="text-muted">暂无预算数据，请添加预算</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加预算模态框 -->
    <div class="modal fade" id="addBudgetModal" tabindex="-1" aria-labelledby="addBudgetModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addBudgetModalLabel">添加预算</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="POST" action="{{ url_for('add_budget') }}">
                    <input type="hidden" name="month" value="{{ selected_month }}">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="category" class="form-label">支出类别</label>
                            <select id="category" name="category" class="form-select" required>
                                <option value="" disabled selected>请选择类别</option>
                                {% for category in expense_categories %}
                                    <option value="{{ category.id }}">{{ category.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="amount" class="form-label">预算金额</label>
                            <div class="input-group">
                                <span class="input-group-text">¥</span>
                                <input type="number" id="amount" name="amount" class="form-control" step="0.01" min="0.01" required>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-success">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 编辑预算模态框 -->
    <div class="modal fade" id="editBudgetModal" tabindex="-1" aria-labelledby="editBudgetModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editBudgetModalLabel">编辑预算</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="POST" action="{{ url_for('edit_budget') }}">
                    <input type="hidden" name="month" value="{{ selected_month }}">
                    <input type="hidden" id="edit-id" name="id" value="">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="edit-category" class="form-label">支出类别</label>
                            <select id="edit-category" name="category" class="form-select" required>
                                {% for category in expense_categories %}
                                    <option value="{{ category.id }}">{{ category.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="edit-amount" class="form-label">预算金额</label>
                            <div class="input-group">
                                <span class="input-group-text">¥</span>
                                <input type="number" id="edit-amount" name="amount" class="form-control" step="0.01" min="0.01" required>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-primary">更新</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 删除预算模态框 -->
    <div class="modal fade" id="deleteBudgetModal" tabindex="-1" aria-labelledby="deleteBudgetModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteBudgetModalLabel">删除预算</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="POST" action="{{ url_for('delete_budget') }}">
                    <input type="hidden" name="month" value="{{ selected_month }}">
                    <input type="hidden" id="delete-id" name="id" value="">
                    <div class="modal-body">
                        <p>确定要删除 <strong id="delete-category-name"></strong> 的预算吗？</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-danger">删除</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 引入自定义JS -->
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>

    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 编辑预算模态框数据绑定
            const editBudgetModal = document.getElementById('editBudgetModal');
            editBudgetModal.addEventListener('show.bs.modal', function(event) {
                const button = event.relatedTarget;
                const id = button.getAttribute('data-id');
                const category = button.getAttribute('data-category');
                const amount = button.getAttribute('data-amount');
                
                document.getElementById('edit-id').value = id;
                document.getElementById('edit-category').value = category;
                document.getElementById('edit-amount').value = amount;
            });

            // 删除预算模态框数据绑定
            const deleteBudgetModal = document.getElementById('deleteBudgetModal');
            deleteBudgetModal.addEventListener('show.bs.modal', function(event) {
                const button = event.relatedTarget;
                const id = button.getAttribute('data-id');
                const categoryName = button.getAttribute('data-category');
                
                document.getElementById('delete-id').value = id;
                document.getElementById('delete-category-name').textContent = categoryName;
            });
        });
    </script>
</body>
</html>